<template>
	<view class="wh p10 f14 bf">
		<view class="uni-container mt10">
			<uni-table ref="table" border stripe emptyText="暂无类型">
				<uni-tr>
					<uni-th align="center">排序</uni-th>
					<uni-th align="center">桌位类型</uni-th>
					<uni-th align="center">人数</uni-th>
					<uni-th align="center">操作</uni-th>
				</uni-tr>
				<uni-tr v-for="(row, i) in areaList" :key="i">
					<uni-td>{{ row.sort }}</uni-td>
					<uni-td>
						<view class="name">{{ row.name }}</view>
					</uni-td>
					<uni-td>{{ row.max }}人</uni-td>
					<uni-td align="center">
						<text class="cf06 mr10" @click.stop="add(row)">编辑</text>
						<text class="cf06 mr10" @click.stop="del(row)">删除</text>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box"><uni-pagination show-icon :page-size="queryForm.pageSize" :current="queryForm.pageNo" :total="total" @change="change" /></view>
		</view>
		<view class="buts">
			<view class="p-0-20 mb10">
				<view class="cf bs30 tac p10 f14 wei" :style="{background:subColor,color:'#000'}" @click="add">新增类型</view>
			</view>
			<view class="c8 tac pb15 f14" @click="cancel">取消</view>
		</view>
		<addArea ref="addArea" @save="fetchData"></addArea>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex'
	import addArea from "./components/addType.vue"
	export default {
		components: {
			addArea,
		},
		data() {
			return {
				subColor: uni.getStorageSync('subject_color'),
				areaList: [],
				queryForm: {
					pageNo: 1,
					pageSize: 10,
				},
				total:0,
			}
		},
		onLoad(options) {
			this.fetchData()
		},
		computed: {
			...mapState({
				storeId: state => state.storeId,
			}),
		},
		methods: {
			async fetchData() {
				const {
					data:{ list, total, pageNo, pageSize }
				} = await this.beg.request({
					url: this.api.tableType,
					data: this.queryForm
				})
				this.total = total
				this.queryForm.pageNo = pageNo
				this.queryForm.pageSize = pageSize
				this.areaList = list ? list : []
			},
			change(e) {
				this.queryForm.pageNo = e.current;
				this.fetchData()
			},
			del(v){
				uni.showModal({
					title: '温馨提示',
					content: '你确定要删除当前项吗',
					success: async (res) => {
						if (res.confirm) {
							let {
								msg
							} = await this.beg.request({
								url: `${this.api.tableType}/${v.id}`,
								method: "DELETE",
							})
							this.fetchData()
							uni.$u.toast(msg)
						}
					}
				});
			},
			add(v){
				if(v){
					this.$refs['addArea'].open(v)
				}else{
					this.$refs['addArea'].open()
				}
			},
			cancel() {
				uni.navigateBack({
					delta: 1
				});
			},
		
		}
	}
</script>

<style lang="scss" scoped>
	/deep/.current-index-text{
	    color: #FD8906 !important;
	}
	.buts {
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
	}
</style>